<template>
	<view class="warp">
		<view class="status_bar" style="background-color: #FFF;position: fixed;top: 0;left: 0;z-index: 999;">
			<!-- 这里是状态栏 -->
		</view>
		<view style="width: 100%;display: flex;justify-content: space-between; box-sizing: border-box;padding: 12rpx 16rpx;background-color: #FFF;position: fixed;top: 10;left: 0;z-index: 999;" >
			<view style="display: flex;justify-content: flex-start;align-items: center; box-sizing: border-box;">
				<view style="width: 72rpx;" @click="goBack">
					<view style="border: 2rpx solid #E5E6E8;border-radius: 24rpx;">
						<image style="width: 36rpx;height: 36rpx;margin: 16rpx 16rpx 4rpx;" src="/static/images/icon/left-icon.png"></image>
					</view>
				</view>
				<view style="margin-left: 32rpx;display: flex;align-items: center;justify-content: center;" @click="goUserDetail(expertUserInfo.uid)">
					<image
						:src="expertUserInfo.avatar"
						style="width:48rpx;height: 48rpx;border-radius: 50%;"
					></image>
				</view>
				<view @click="goUserDetail(expertUserInfo.uid)" style="font-size: 32rpx;color: #232426;margin-left: 16rpx;font-weight: 500;">
					{{expertUserInfo.nickname}}
				</view>
				<view style="width: 36rpx;height: 36rpx;border-radius: 50%;background-color: #FFF0D8;margin-left: 16rpx;display: flex;justify-content: center;align-items: center; box-sizing: border-box;">
					<image
						src="/static/images/icon/fire.png"
						style="width:24rpx;height: 24rpx;"
					></image>
				</view>
			</view>
			
			<view style="display: flex;justify-content: flex-end;box-sizing: border-box;align-items: center;gap: 22rpx;">
				<view v-if="!author" style="display: flex;align-items: center;justify-content: center;" @click="showReport=true">
					<image
						src="/static/images/icon/warning.png"
						style="width:44rpx;height: 44rpx;"
					></image>
				</view>
				<view style="display: flex;align-items: center;justify-content: center;" @click="showShare">
					<image
						src="/static/images/icon/share.svg"
						style="width:46rpx;height: 46rpx;"
					></image>	
				</view>
			</view>
		</view>
		<view style="width: 100%;background-color: #FFF;padding-top: 60rpx;">
			<view style="margin-top: 16rpx;position: relative;">
				<u-swiper :list="banner_list" @change="e => current = e.current" height="945" >
					<view slot="indicator" class="indicator">
						<view
							class="indicator__dot"
							v-for="(item, index) in banner_list"
							:key="index"
							:class="[index === current && 'indicator__dot--active']"
						>
						</view>
					</view>
				</u-swiper>
				<view style="position: absolute;top: 40rpx;right: 40rpx;border-radius: 200rpx;background: rgba(0, 0, 0, 0.4);padding: 4rpx 16rpx;">
					<view style="color: #FFF;letter-spacing: 4rpx;font-size: 26rpx;" >{{current+1}}/{{banner_list.length}}</view>
				</view>
			</view>
			<view style="">
				<view v-if="archives.type == 1" style="display: flex;justify-content: flex-start;align-items: center;padding: 40rpx 32rpx 0;">
					<view>
						<u-image
							src="/static/images/icon/expert_active.png"
							width="34rpx"
							height="34rpx"
						></u-image>
					</view>
					<view style="color: #27C5D6;margin-left: 8rpx;letter-spacing: 0.28rpx;">我的技能</view>
				</view>
				<view v-else-if="archives.type == 2" style="display: flex;justify-content: flex-start;align-items: center;padding: 40rpx 32rpx 0;">
					<view>
						<u-image
							src="/static/images/icon/task_circle.png"
							width="34rpx"
							height="34rpx"
						></u-image>
					</view>
					<view style="color: #27C5D6;margin-left: 8rpx;letter-spacing: 0.28rpx;">任務需求</view>
				</view>
				<view v-else style="display: flex;justify-content: flex-start;align-items: center;padding: 40rpx 32rpx 0;">
					
				</view>
				<view style="margin-top: 20rpx;color: #232426;font-size: 32rpx;font-weight: 600;line-height: 140%;letter-spacing: 0.64rpx;padding: 0 32rpx;">
					{{archives.title}}
				</view>
				<view style="display: flex;justify-content: space-between;margin-top: 20rpx;padding: 20rpx 32rpx;">
					<view style="display: flex;justify-content: flex-start;align-items:center;">
						<view style="color: #27C5D6;font-size: 28rpx;font-weight: 510;">NT$</view>
						<view style="color: #27C5D6;font-size: 44rpx;font-weight: 600;margin-left: 10rpx;">{{archives.price}}</view>
						<view style="color: #27C5D6;font-size: 24rpx;letter-spacing: 0.48rpx;margin-left: 10rpx;"> / {{archives.nums}}{{archives.unitValue}}</view>
					</view>
					<view style="background-color: rgba(255, 165, 20, 0.10);border-radius: 44rpx;color: #FFA514;font-size: 24rpx;letter-spacing: 0.48rpx;padding: 16rpx 20rpx;">
						已完成{{archives.orderNumber}}單
					</view>
				</view>
				
				<!--guide-->
				<view v-if="guide" style="width: 100%;margin: 16rpx 0; padding: 24rpx 32rpx;display: flex;justify-content: space-between;box-sizing: border-box;align-items: center;">
					<view style="display: flex;justify-content: flex-start;align-items: center;">
						<view>
							<u-image
								src="/static/images/icon/lightning.png"
								width="40rpx"
								height="40rpx"
							></u-image>
						</view>
						<view style="margin-left: 16rpx;">
							第一次預約？簡單圖解流程
						</view>
						<view style="border: 1rpx solid #27C5D6;border-radius: 40rpx;color: #27C5D6;padding: 12rpx 24rpx;font-size: 28rpx;margin-left: 16rpx;">
							查看流程
						</view>
					</view>
					<view @click="closeGuide">
						<u-image
							src="/static/images/icon/close-2x.png"
							width="32rpx"
							height="32rpx"
						></u-image>
					</view>
				</view>
				<!--guide結束-->
				
				
				<view style="width: 100%;margin-bottom: 80rpx;box-sizing: border-box;">
					<view class="tab-nav" :class="{ 'fixed-nav': isFixed }">
						<view :class="{'tab-nav-item-active':navTab==1,'tab-nav-item':navTab!=1}" @click="changeNav(1)">簡介</view>
						<view :class="{'tab-nav-item-active':navTab==2,'tab-nav-item':navTab!=2}" @click="changeNav(2)">時間</view>
						<view :class="{'tab-nav-item-active':navTab==3,'tab-nav-item':navTab!=3}" @click="changeNav(3)">地點</view>
						<view :class="{'tab-nav-item-active':navTab==4,'tab-nav-item':navTab!=4}" @click="changeNav(4)">客人心得</view>
					</view>
					
					<!--簡介-->
					<view id="profile">
						<view class="tab-content">
							<view style="padding: 40rpx 0;">
								<u-parse 
									:content="richText"
									:tagStyle="style"
								></u-parse>
							</view>
							<!-- <view style="width: 100%;margin: 56rpx 0;">
								<view style="padding: 2px 10px;border-radius: 6px;background:#F0F0F0;color:#6A707C;font-size: 28rpx;width: 156rpx;text-align: center;">形象管理</view>
							</view> -->
							<view style="color: #808690;font-size: 24rpx;">更新時間:{{archives.updatetime}}</view>
						</view>
						<view style="border-top: 1rpx solid #F0F0F0;width: 100%;margin-top: 36rpx;">
							<view style="padding:36rpx 32rpx;">
								<view style="color: #020202;font-size: 28rpx;font-weight: 600"> 專業 OR 達人</view>
								<view style="display: flex;justify-content: space-between;margin-top: 40rpx;">
									<view style="display: flex;justify-content: flex-start;align-items: center;">
										<view>
											<u-image
												:src="expertUserInfo.avatar"
												width="84rpx"
												height="84rpx"
												shape="circle"
											></u-image>
										</view>
										<view style="margin-left: 20rpx;">
											<view style="display: flex;justify-content: flex-start;align-items: center;">
												<view style="font-size: 32rpx;color: #232426;font-weight: 600;">{{expertUserInfo.nickname}}</view>
												<view style="display: flex;justify-content: flex-start;align-items: center;margin-left: 16rpx;">
													<u-icon
													  size="32rpx"
													  name="star-fill"
													  color="#FFA514"
													></u-icon>
													<view style="color: #FFA514;font-size: 28rpx;font-weight: 500;margin-left: 4rpx;">{{expertUserInfo.rate}}</view>
												</view>
											</view>
											<view style="color: #6A707C;font-size: 24rpx;margin-top: 8rpx;">{{expertUserInfo.bio}}</view>
										</view>
									</view>
									
								</view>
							</view>
						</view>
					</view>
					<!--簡介結束-->
					
					<!--時間-->
					<view style="padding:36rpx 32rpx;" id="timer">
						<view style="display: flex;justify-content: space-between;" @click="showReserve=true;">
							<view style="color: #020202;font-size: 28rpx;font-weight: 600;">時間( {{archives.start}} ~ {{archives.end}} )</view>
							<view>
								<u-image
									src="/static/images/icon/right-icon.png"
									width="38rpx"
									height="38rpx"
								></u-image>
							</view>
						</view>
						<view style="margin-top: 28rpx;">
							<view v-if="yuyueTimes['monday'] && yuyueTimes['monday'].length > 0" style="display: flex;justify-content: flex-start;margin-bottom:36rpx;align-items: center;">
								<view style="color: #1AAEC0;background-color: #EDF5FF;padding:6rpx 12rpx;border-radius: 8rpx;height:52rpx;">
									週一
								</view>
								<view style="margin-left: 20rpx;color: #6A707C;font-size: 26rpx;line-height: 130%;width: 500rpx;">
									{{ yuyueTimes['monday'] }}
								</view>
							</view>
							<view v-if="yuyueTimes['tuesday'] && yuyueTimes['tuesday'].length > 0" style="display: flex;justify-content: flex-start;margin-bottom:36rpx;align-items: center;">
								<view style="color: #1AAEC0;background-color: #EDF5FF;padding:6rpx 12rpx;border-radius: 8rpx;height:52rpx;">
									週二
								</view>
								<view style="margin-left: 20rpx;color: #6A707C;font-size: 26rpx;line-height: 130%;width: 500rpx;">
									{{ yuyueTimes['tuesday'] }}
								</view>
							</view>
							<view v-if="yuyueTimes['wednesday'] && yuyueTimes['wednesday'].length > 0" style="display: flex;justify-content: flex-start;margin-bottom:36rpx;align-items: center;">
								<view style="color: #1AAEC0;background-color: #EDF5FF;padding:6rpx 12rpx;border-radius: 8rpx;height:52rpx;">
									週三
								</view>
								<view style="margin-left: 20rpx;color: #6A707C;font-size: 26rpx;line-height: 130%;width: 500rpx;">
									{{ yuyueTimes['wednesday'] }}
								</view>
							</view>
							<view v-if="yuyueTimes['thursday'] && yuyueTimes['thursday'].length > 0" style="display: flex;justify-content: flex-start;margin-bottom:36rpx;align-items: center;">
								<view style="color: #1AAEC0;background-color: #EDF5FF;padding:6rpx 12rpx;border-radius: 8rpx;height:52rpx;">
									週四
								</view>
								<view style="margin-left: 20rpx;color: #6A707C;font-size: 26rpx;line-height: 130%;width: 500rpx;">
									{{ yuyueTimes['thursday'] }}
								</view>
							</view>
							<view v-if="yuyueTimes['friday'] && yuyueTimes['friday'].length > 0" style="display: flex;justify-content: flex-start;margin-bottom:36rpx;align-items: center;">
								<view style="color: #1AAEC0;background-color: #EDF5FF;padding:6rpx 12rpx;border-radius: 8rpx;height:52rpx;">
									週五
								</view>
								<view style="margin-left: 20rpx;color: #6A707C;font-size: 26rpx;line-height: 130%;width: 500rpx;">
									{{ yuyueTimes['friday'] }}
								</view>
							</view>
							<view v-if="yuyueTimes['saturday'] && yuyueTimes['saturday'].length > 0" style="display: flex;justify-content: flex-start;margin-bottom:36rpx;align-items: center;">
								<view style="color: #1AAEC0;background-color: #EDF5FF;padding:6rpx 12rpx;border-radius: 8rpx;height:52rpx;">
									週六
								</view>
								<view style="margin-left: 20rpx;color: #6A707C;font-size: 26rpx;line-height: 130%;width: 500rpx;">
									{{ yuyueTimes['saturday'] }}
								</view>
							</view>
							<view v-if="yuyueTimes['sunday'] && yuyueTimes['sunday'].length > 0" style="display: flex;justify-content: flex-start;margin-bottom:36rpx;align-items: center;">
								<view style="color: #1AAEC0;background-color: #EDF5FF;padding:6rpx 12rpx;border-radius: 8rpx;height:52rpx;">
									週天
								</view>
								<view style="margin-left: 20rpx;color: #6A707C;font-size: 26rpx;line-height: 130%;width: 500rpx;">
									{{ yuyueTimes['sunday'] }}
								</view>
							</view>
							
						</view>
					</view>
					<!--時間結束-->
					<view style="background-color: #F0F0F0;width: 100%;height: 16rpx;"></view>
					<!--地點-->
					<view style="padding:36rpx 32rpx;" id="address">
						<view style="display: flex;justify-content: space-between;">
							<view style="color: #020202;font-size: 28rpx;font-weight: 600;">地點</view>
							<view @click="navi">
								<u-image
									src="/static/images/icon/right-icon.png"
									width="38rpx"
									height="38rpx"
								></u-image>
							</view>
						</view>
						<view style="width: 100%;margin-top: 24rpx;display: inline-flex;">
							<view style="display: flex;justify-content: flex-start;background-color: #EDF5FF;padding:16rpx 24rpx;border-radius: 12rpx;flex-wrap: nowrap;">
								<view>
									<u-image
										src="/static/images/icon/map-success.png"
										width="32rpx"
										height="32rpx"
									></u-image>
								</view>
								<view style="color: #1AAEC0;font-size: 28rpx;margin-left: 16rpx;" v-if="archives.service_type == 1">到府服務</view>
								<view style="color: #1AAEC0;font-size: 28rpx;margin-left: 16rpx;" v-else-if="archives.service_type == 2">{{archives.address}}</view>
								<view style="color: #1AAEC0;font-size: 28rpx;margin-left: 16rpx;" v-else>綫上進行</view>
							</view>
						</view>
					</view>
					<!--地點結束-->
					
					<view style="background-color: #F0F0F0;width: 100%;height: 16rpx;"></view>
					
					<!--評價-->
					<view id="evaluate" style="padding:36rpx 32rpx;display: inline-block;width: 100%;box-sizing: border-box;">
						<view style="display: flex;justify-content: flex-start;align-items: center;">
							<view style="color: #020202;font-size: 28rpx;font-weight: 600;">客人心得</view>
							<view style="color: #27C5D6;font-size: 26rpx;margin-left: 12rpx;">{{archives.commentCount}}</view>
						</view>
						<view v-for="(item,index) in commentList" :key="index">
							<view style="display: flex;justify-content: space-between;width:100%;margin-top: 44rpx;">
								<view style="width: 64rpx;">
									<u-image
										:src="item.avatar"
										width="64rpx"
										height="64rpx"
										shape="circle"
									></u-image>
								</view>
								<view style="box-sizing: border-box;min-width: 600rpx;margin-left: 16rpx;">
									<view style="display: flex;justify-content: space-between;align-items: center;">
										<view style="display: flex;justify-content: flex-start;align-items: center;">
											<view style="font-size: 28rpx;font-weight: 600;">{{item.nickname}}</view>
											<view style="color: #808690;font-size: 24rpx;margin-left: 16rpx;">{{item.city}}</view>
										</view>
										<view style="display: flex;justify-content: flex-end;align-items: center;">
											<block v-for="i in 5" :key="i">
											    <u-icon
											      size="32rpx"
											      :name="i <= item.rate ? 'star-fill' : 'star'"
											      :color="i <= item.rate ? '#FFA514' : '#C0C0C0'"
											    ></u-icon>
											  </block>
										</view>
									</view>
									<view style="margin-top: 12rpx;">
										<view style="color: #378CFC;font-size: 28rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">{{item.bio}}</view>
									</view>
									<view style="margin-top: 28rpx;">
										<view>
											<u-parse :content="item.content"></u-parse>
										</view>
									</view>
									<view style="display: flex;justify-content: flex-start;align-items: center;">
										<view v-for="(item_, index_) in item.images" style="margin-right: 10px;">
											<u-image
												:src="item_"
												width="128"
												height="158"
											></u-image>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!--評價結束-->
				</view>
				
				<view style="height: 80rpx;"></view>
				
				<!--底欄-->
				<view style="position: fixed;bottom: 0;left: 0; width: 100%;box-sizing: border-box;border-top: 1rpx solid #F6F8FA;padding: 20rpx 24rpx 70rpx;z-index: 999;background-color: #FFF;">
					<view style="display: flex;justify-content: space-between;width: 100%;align-items: center;">
						<view style="width:100rpx;text-align: center;" @click="handleLike">
							<image
								v-if="archives.is_like"
								src="/static/images/icon/likes-active.png"
								width="44rpx"
								height="44rpx"
								style="display: block;margin: 0 auto;width: 44rpx;height: 44rpx;"
							></image>
							<image
								v-else
								src="/static/images/icon/likes-black.png"
								width="44rpx"
								height="44rpx"
								style="display: block;margin: 0 auto;width: 44rpx;height: 44rpx;"
							></image>
							<view style="color: #27C5D6;font-size: 24rpx;" v-if="archives.is_like">{{archives.likes}}</view>
							<view style="color: #232426;font-size: 24rpx;" v-else>{{archives.likes}}</view>
						</view>
						<view style="width:100rpx;text-align: center;margin-left: 8rpx;" @click="handleStar">
							<image
								v-if="archives.is_star"
								src="/static/images/icon/tag-active.png"
								width="44rpx"
								height="44rpx"
								style="display: block;margin: 0 auto;width: 44rpx;height: 44rpx;"
							></image>
							<image
								v-else
								src="/static/images/icon/tag.png"
								width="44rpx"
								height="44rpx"
								style="display: block;margin: 0 auto;width: 44rpx;height: 44rpx;"
							></image>
							<view style="color: #27C5D6;font-size: 24rpx;" v-if="archives.is_star">{{archives.star}}</view>
							<view style="color: #232426;font-size: 24rpx;" v-else>{{archives.star}}</view>
						</view>
						<view v-if="!author" @click="handleChat()" style="margin-left: 24rpx;border-radius: 200rpx;border:2rpx solid #27C5D6;color: #27C5D6;text-align: center; ">
							<view style="padding:16rpx 40rpx;gap: 12rpx;font-size: 28rpx;">私訊</view>
						</view>
						<view v-else @click="handleEdit()" style="margin-left: 24rpx;border-radius: 200rpx;border:2rpx solid #27C5D6;color: #27C5D6;text-align: center; ">
							<view style="padding:16rpx 50rpx;gap: 12rpx;font-size: 28rpx;">编辑技能</view>
						</view>
						<view v-if="!author" @click="placeOrder()" style="margin-left: 24rpx;border-radius: 200rpx;background-color:#27C5D6;color: #FFF;text-align: center; ">
							<view style="padding:16rpx 80rpx;gap: 12rpx;font-size: 28rpx;">我要預約</view>
						</view>
						<view v-else style="margin-left: 24rpx;border-radius: 200rpx;background-color:#27C5D6;color: #FFF;text-align: center; ">
							<view style="padding:16rpx 50rpx;gap: 12rpx;font-size: 28rpx;">查看私讯</view>
						</view>
					</view>
				</view>
				<!--底欄結束-->
			</view>
		</view>
		
		<!--可預約時間-->
		<u-popup :show="showReserve" mode="bottom" round="48rpx">
			<view class="popup-reserve">
				<view class="popup-reserve-header">
					<view class="site"></view>
					<view class="site title">可預約時間</view>
					<view class="site btn" @click="closeReserve">
						<u-image
							src="/static/images/icon/close.svg"
							width="60rpx"
							height="60rpx"
						></u-image>
					</view>
				</view>
				<view class="popup-reserve-body">
					<view style="background-color: #FAFAFA;border-radius: 24rpx;padding-bottom: 24rpx;">
						<view style="padding:0 56rpx;display: flex;justify-content: space-between;align-items: center;align-self: stretch;">
							<view v-for="(item, index) in weekList" :key="index" >
								<view :class="{'week-item':week!=item.id,'week-item-active':week==item.id}" @click="changeWeek(item.id)">{{item.titlle}}</view>
							</view>
						</view>
						<view class="line"></view>
						<view class="card">
						  <view style="display: flex;justify-content: space-between;">
						    <view v-for="(item, index) in dateList" :key="index">
						      <view style="color: #BEC0C5;font-size: 24rpx;line-height: 140%;text-align: center;">{{item.title}}</view>
						      <view v-for="(item_, index_) in item.children" :key="index_">
						        <view 
						          :class="{
						            'card-item': !item_.available, 
						            'card-item-active': item_.available
						          }"
						        >
						          {{item_.title}}
						        </view>
						      </view>
						    </view>
						  </view>
						</view>
						<view class="popup-reserve-footer">
							<view class="popup-reserve-footer-tips">
								<view class="popup-reserve-bag active"></view>
								<view class="popup-reserve-bag-title">開放</view>
							</view>
							<view class="popup-reserve-footer-tips">
								<view class="popup-reserve-bag unactive"></view>
								<view class="popup-reserve-bag-title">未開放</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!--可預約時間結束-->
		
		<!--檢舉對方-->
		<u-popup :show="showReport" mode="bottom" round="48rpx">
			<view class="popup-reserve">
				<view class="popup-reserve-header">
					<view style="width: 180rpx;color: #808690;font-size: 32rpx;text-align: left;" @click="showReport=false">取消</view>
					<view style="font-size: 30rpx;color:#232426;font-weight: 600;text-align: center;">檢舉對方?</view>
					<view style="width: 180rpx;color: #27C5D6;font-size: 32rpx;text-align: right;" @click="sendReport">送出</view>
				</view>
				<view class="popup-reserve-body">
					<view style="color: #FF3D43;font-size:24rpx;width:100%;text-align: center;">檢舉後您將無法再與對方聯繫，請選擇檢舉原因：</view>
					<view style="margin-top: 32rpx;">
						<view v-for="(item,index) in reportList" :key="index">
							<view @click="setReport(item.id)" style="display: flex;justify-content: flex-start;padding: 24rpx;border-radius: 120rpx;background-color: #F6F8FA;margin-bottom: 32rpx;">
								<view>
									<u-image
										v-if="item.id == reportId"
										src="/static/images/icon/success-solid.png"
										width="48rpx"
										height="48rpx"
									></u-image>
									<view v-else style="border-radius: 50%;width: 48rpx;height: 48rpx;background-color: #E5E6E8;"></view>
								</view>
								<view style="margin-left: 32rpx;">{{item.title}}</view>
							</view>
						</view>
						<view v-if="reportId==4" style="padding: 24rpx;border-radius: 120rpx;background-color: #F6F8FA;display: flex;justify-content: flex-start;align-items: center;">
							<u-input name="title" placeholder="請說明原因" v-model="reportTitle" border="none" maxlength="20" @change="handleInput"></u-input>
							<view style="color:#BEC0C5;font-size: 20rpx;display: flex;justify-content: flex-end;">
								{{reportFontNum}} / 100
							</view>
						</view>
					</view>
				</view>
			</view>
		</u-popup>
		<!--檢舉對方結束-->
		<share-popup ref="sharePopup" ></share-popup>
	</view>
</template>

<script>
	import sharePopup from '@/components/share-popup.vue';
	import { archivesDetail, archivesStart, archivesLikes, createChat, getEvaluation } from '@/config/api.js';
	
	export default {
		data() {
			return {
				id:0,
				userid:0,
				guide:true,
				author:false,
				userInfo:{
					nickname:'',
					avatar:''
				},
				expertUserInfo:{
					nickname:'',
					avatar:'',
					bio:'',
					rate:'',
					uid:0
				},
				archives:{
					uid:'',
					title:'',
					price:0,
					unitValue:'',
					updatetime:'',
					address:'',
					commentCount:0,
					likes:0,
					star:0,
					is_like:0,
					is_star:0,
					orderNumber:0,
					service_type:0,
					nums:0
				},
				commentList:[],
				current:0,
				banner_list:[],
				navTab:1,
				richText:``,
				showReserve:false,
				navHeight:840,
				isFixed:false,
				targetElement:{profile:0,timer:0,address:0,evaluate:0},
				week:1,
				weekList:[{
					id:1,
					titlle:'一'
				},{
					id:2,
					titlle:'二'
				},{
					id:3,
					titlle:'三'
				},{
					id:4,
					titlle:'四'
				},{
					id:5,
					titlle:'五'
				},{
					id:6,
					titlle:'六'
				},{
					id:0,
					titlle:'日'
				}],
				dateList:[{
					id:1,
					title:'凌晨',
					children:[{
						id:0,
						title:'00:00',
						available: false
					},{
						id:1,
						title:'01:00',
						available: false
					},{
						id:2,
						title:'02:00',
						available: false
					},{
						id:3,
						title:'03:00',
						available: false
					},{
						id:4,
						title:'04:00',
						available: false
					},{
						id:5,
						title:'05:00',
						available: false
					}]
				},{
					id:2,
					title:'早上',
					children:[{
						id:6,
						title:'06:00',
						available: false
					},{
						id:7,
						title:'07:00',
						available: false
					},{
						id:8,
						title:'08:00',
						available: false
					},{
						id:9,
						title:'09:00',
						available: false
					},{
						id:10,
						title:'10:00',
						available: false
					},{
						id:11,
						title:'11:00',
						available: false
					}]
				},{
					id:3,
					title:'傍晚',
					children:[{
						id:12,
						title:'12:00',
						available: false
					},{
						id:13,
						title:'13:00',
						available: false
					},{
						id:14,
						title:'14:00',
						available: false
					},{
						id:15,
						title:'15:00',
						available: false
					},{
						id:16,
						title:'16:00',
						available: false
					},{
						id:17,
						title:'17:00',
						available: false
					}]
				},{
					id:4,
					title:'晚上',
					children:[{
						id:18,
						title:'18:00',
						available: false
					},{
						id:19,
						title:'19:00',
						available: false
					},{
						id:20,
						title:'20:00',
						available: false
					},{
						id:21,
						title:'21:00',
						available: false
					},{
						id:22,
						title:'22:00',
						available: false
					},{
						id:23,
						title:'23:00',
						available: false
					}]
				}],
				weekRes:[],//当前显示
				dateRes:[[19,21,24],[1,2,3],[1,2,3],[16,19,22],[7,9,10],[12,13],[11]],//结果集
				showReport:false,
				reportList:[{
					id:1,
					title:'惡意騷擾或冒犯言論'
				},{
					id:2,
					title:'詐騙、虛假資訊或不當交易行為'
				},{
					id:3,
					title:'不雅或違反平台規範的內容'
				},{
					id:4,
					title:'其他違規內容'
				}],
				reportId:0,
				reportTitle:'',
				reportFontNum:0,
				yuyueTimes:[],
				calendarTimes:[],
				style: {
					// 字符串的形式
					a: "color: #188CA2;",
				},
				mapOption:{
					latitude:'',
					longitude:''
				},
				// 添加星期映射
				weekMap: {
				  0: 'sunday',
				  1: 'monday', 
				  2: 'tuesday',
				  3: 'wednesday',
				  4: 'thursday',
				  5: 'friday',
				  6: 'saturday'
				}
			}
		},
		components: {
			sharePopup
		},
		onLoad(option) {
			// console.log(option)
			this.id = option.id;
			this.getContent();
			this.getLocalUser();
		},
		onPageScroll(e) {
			// this.isFixed = e.scrollTop > this.navHeight;
			// console.log(e.scrollTop)
		},
		onReady(){
			const query = uni.createSelectorQuery().in(this)
			query.select('#profile').boundingClientRect(res => {
				this.targetElement.profile = res.top;
			}).exec()
			query.select('#timer').boundingClientRect(res => {
				this.targetElement.timer = res.top;
			}).exec()
			query.select('#address').boundingClientRect(res => {
				this.targetElement.address = res.top;
			}).exec()
			query.select('#evaluate').boundingClientRect(res => {
				this.targetElement.evaluate = res.top;
			}).exec()
		},
		methods:{
			getLocalUser(){
				let guideLocal = uni.getStorageSync('guide');
				let info = uni.getStorageSync('userInfo');
				if(info.length != 0){
					//设置顶部用户信息
					this.userid = info.id;
					this.userInfo.avatar = info.avatar;
					this.userInfo.nickname = info.nickname;
				}
				if( guideLocal.length != 0 && guideLocal == false){
					this.guide = false;
				}
				
			},
			getContent(){
				let that = this;
				uni.showLoading();
				
				archivesDetail({id:this.id}).then((res) => {
					//success
					uni.hideLoading();
					that.setContent(res)
					that.getEvaluation(res.id)
				}).catch(() =>{
					
				})
			},
			setContent(info){
				let that = this;
				//设置达人信息
				that.expertUserInfo.uid = info.uid;
				that.expertUserInfo.avatar = info.avatar;
				that.expertUserInfo.nickname = info.nickname;
				that.expertUserInfo.bio = info.bio;
				that.expertUserInfo.rate = info.rate;
				if( info.uid == that.userid ){
					that.author = true;
				}
				//设置轮播
				that.banner_list = [];
				for( let i in info.images ){
					that.banner_list.push(info.images[i])
				}
				//
				that.archives.uid = info.uid;
				that.archives.title = info.title;
				that.archives.price = info.price.toLocaleString();
				that.archives.address = info.address;
				that.archives.unitValue = info.unit == 1?'小時':info.unit == 2?'天':'筆' ;
				that.archives.nums = info.num;
				
				that.archives.updatetime = info.updated_at;
				that.archives.start = info.start;
				that.archives.end = info.end;
				that.richText = info.description;
				that.archives.likes = info.likes;
				that.archives.is_like = info.is_like;
				that.archives.star = info.star;
				that.archives.is_star = info.is_star;
				
				that.archives.orderNumber = info.orders;
				that.archives.service_type = info.service_type;
				that.yuyueTimes['monday'] = info.times.monday;
				that.yuyueTimes['tuesday'] = info.times.tuesday;
				that.yuyueTimes['wednesday'] = info.times.wednesday;
				that.yuyueTimes['thursday'] = info.times.thursday;
				that.yuyueTimes['friday'] = info.times.friday;
				that.yuyueTimes['saturday'] = info.times.saturday;
				that.yuyueTimes['sunday'] = info.times.sunday;
				
				that.calendarTimes['monday'] = info.monday;
				that.calendarTimes['tuesday'] = info.tuesday;
				that.calendarTimes['wednesday'] = info.wednesday;
				that.calendarTimes['thursday'] = info.thursday;
				that.calendarTimes['friday'] = info.friday;
				that.calendarTimes['saturday'] = info.saturday;
				that.calendarTimes['sunday'] = info.sunday;
				
				//
				if( info.service_type == 2 ){
					that.setNavigation(info.latitude_longitude);
					console.log(that.mapOption.longitude);
				}
				
				// 处理可预约时间
				that.$nextTick(() => {
				    that.processAvailableTimes();
				});
			},
			getEvaluation(id){
				
				let that = this;
				let parames = {
					id:id
				}
				uni.showLoading();
				
				getEvaluation(parames).then((res) => {
					//success
					uni.hideLoading();
					that.setComment(res)
				}).catch(() =>{
					
				})
			},
			setComment(data){
				this.commentList = data;
				this.archives.commentCount = data?.length || 0;
				// for(let i in data){
				// 	let res = {
				// 		avatar:data[i].avatar,
				// 		nickname:data[i].nickname,
				// 		city:data[i].address,
				// 		bio:data[i].bio || '',
				// 		content: data[i].content,
				// 		rate: data[i].rate,
				// 	}
				// 	this.commentList.push(res)
				// }
			},
			goBack(){
				uni.navigateBack()
			},
			changeNav(type){
				this.navTab = type;
				let scrollTop = 0;
				switch(type){
					case 1:scrollTop = this.targetElement.profile;break;
					case 2:scrollTop = this.targetElement.timer;break;
					case 3:scrollTop = this.targetElement.address;break;
					case 4:scrollTop = this.targetElement.evaluate;break;
					default: ;
				}
				
				uni.pageScrollTo({
					scrollTop:scrollTop,
					duration: 300
				});
			},
			handleClick() {
				// const query = uni.createSelectorQuery().in(this)
				// query.select('#targetElement2').boundingClientRect(res => {
				// 	// const systemInfo = uni.getSystemInfoSync()
				// 	// const navBarHeight = systemInfo.statusBarHeight + 44 // 状态栏+导航栏高度
				// 	const navBarHeight = 0 // 状态栏+导航栏高度
				// 	const scrollTop = 1445
				// 	console.log('res.top:', res)
				// 	// uni.pageScrollTo({ scrollTop, duration: 300 })
				// }).exec()
				
				uni.pageScrollTo({
					scrollTop:this.targetElement.profile,
					duration: 300
				});
			},
			closeReserve(){
				this.showReserve = false;
			},
			checkExistInSimpleArray(id) {
				const currentWeekKey = this.weekMap[this.week];
				const availableTimes = this.calendarTimes[currentWeekKey];
				    
				if (!availableTimes) return false;
				    
				const timeStrings = availableTimes.split(',');
				const hourStr = id.toString().padStart(2, '0') + ':00';
				    
				return timeStrings.includes(hourStr);
			},
			changeWeek(id){
				this.week = id;
				this.processAvailableTimes();
			},
			setReport(id){
				this.reportId = id;
			},
			handleInput(){
				this.reportFontNum = this.reportTitle.replace(/[\s\n]/g, '').length;
			},
			placeOrder(){
				if( this.usedLogin() ){
					uni.navigateTo({
						url: '/pages/order/place?id='+this.id,
						success: res => {},
						fail: () => {},
						complete: (res) => {
							console.log(res)
						}
					});
				}
			},
			handleLike(){
				if( this.usedLogin() ){
					uni.showLoading();
					let that = this;
					let data = {
						id:that.id
					}
					archivesLikes(data).then((res) => {
						//success
						uni.hideLoading();
						console.log(res)
						if( that.archives.is_like == true ){
							that.archives.is_like = false
							that.archives.likes--
						} else {
							that.archives.is_like = true
							that.archives.likes++
						}
					}).catch(() =>{
						
					})
				}
			},
			handleStar(){
				if( this.usedLogin() ){
					uni.showLoading();
					let that = this;
					let data = {
						id:that.id
					}
					archivesStart(data).then((res) => {
						//success
						uni.hideLoading();
						console.log(res)
						if( that.archives.is_star == true ){
							that.archives.is_star = false
							that.archives.star--
						} else {
							that.archives.is_star = true
							that.archives.star++
						}
					}).catch(() =>{
						
					})
				}
			},
			handleChat(){
				if( this.usedLogin() ){
					
					let that = this;
					let data = {
						category:'expert',
						target_user_id:this.archives.uid
					}
					createChat(data).then((res) => {
						//success
						console.log(res)
						uni.navigateTo({
							url: '/pages/my/chatTalk?roomId='+res.id,
							success: res => {},
							fail: () => {},
							complete: (res) => {
								console.log(res)
							}
						});
						
					}).catch(() =>{
						
					})
				}
			},
			//编辑
			handleEdit(){
				if( !this.author ){
					return;
				}
				
				uni.navigateTo({
					url: '/pages/demand/edit?id='+this.id,
					success: res => {},
					fail: () => {},
					complete: (res) => {
						console.log(res)
					}
				});
			},
			closeGuide(){
				this.guide = false;
				uni.setStorageSync('guide', false);
			},
			usedLogin(){
				console.log(this.userid)
				if(this.userid == 0){
					uni.showToast({
						title: "請先登錄",
						icon:'none',
						success: (res) => {
							
						},
						fail: (res) => {
							
						},
					})
					
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/index/login',
							success: res => {},
							fail: () => {},
							complete: (res) => {
								console.log(res)
							}
						});
					}, 1500);
					
					
					return false;
				}
				return true;
			},
			//導航
			setNavigation(gps){
				if(!gps){
					return;
				}
				//設置導航地址
				const coordinateStr = gps;
				const [latitude, longitude] = coordinateStr.split(',').map(Number);
				this.mapOption.latitude = latitude;
				this.mapOption.longitude = longitude;
			},
			navi(){
				if(this.archives.service_type == 2){
					this.navigateToGoogleMap();
				}
			},
			navigateToGoogleMap() {
				let latitude  = this.mapOption.latitude;
				let longitude = this.mapOption.longitude;
				if(!latitude || !longitude){
					uni.showToast({
						icon:'none',
						title:'暫未設置導航地址'
					})
					return;
				}
				
				// 构造Google Maps URL
				const url = `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}&travelmode=driving&dir_action=navigate`;
			  
				// 尝试跳转
				plus.runtime.openURL(url, function(err) {
					if(err) {
						uni.showToast({
							title: '未检测到Google地图应用',
							icon: 'none'
						});
						// 备用方案：打开网页版
						plus.runtime.openWeb(url);
					}
				});
			},
			sendReport(){
				uni.showToast({
					icon:'none',
					title:'檢舉已送出'
				})
				this.showReport = false;
			},
			showShare(){
				this.$refs.sharePopup.show();
			},
			 // 处理可预约时间数据
			processAvailableTimes() {
			    // 重置所有时间的可用状态
			    this.dateList.forEach(timeSlot => {
			      timeSlot.children.forEach(time => {
			        time.available = false;
			      });
			    });
			    
			    // 获取当前星期的数据
			    const currentWeekKey = this.weekMap[this.week];
			    const availableTimes = this.calendarTimes[currentWeekKey];
			    
			    if (availableTimes && availableTimes.length > 0) {
			      // 将字符串时间转换为小时数字
			      const timeStrings = availableTimes.split(',');
			      
			      timeStrings.forEach(timeStr => {
			        // 处理时间格式，如 "07:00" -> 7
			        const hour = parseInt(timeStr.split(':')[0]);
			        
			        // 在 dateList 中找到对应的时间并标记为可用
			        this.dateList.forEach(timeSlot => {
			          const foundTime = timeSlot.children.find(item => item.id === hour);
			          if (foundTime) {
			            foundTime.available = true;
			          }
			        });
			      });
			    }
			},
			goUserDetail(uid){
				uni.navigateTo({
					url:'/pages/home/user?uid='+uid
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.warp{
	width: 100%;
	min-height: 100vh;
	
	padding-top: constant(safe-area-inset-top);
	padding-top: env(safe-area-inset-top);
	
	.indicator{
		justify-content: center;
		@include flex(row);
		
		&__dot {
			height: 8rpx;
			width: 32rpx;
			border-radius: 4rpx;
			background-color: rgba(255, 255, 255, 0.35);
			margin: 0 6px;
			transition: background-color 0.3s;
	
			&--active {
				background-color: #ffffff;
			}
		}
	}
	.fixed-nav{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		padding: 10rpx;
	}
	.tab-nav{
		width: 100%;
		display: flex;
		justify-content: space-around;
		padding-bottom: 8rpx;
		border-bottom: 2rpx solid #F6F8FA;
		background-color: #ffffff;
		z-index: 999;
		
		.tab-nav-item{
			font-size: 28rpx;
			color: #808690;
			padding-bottom: 12rpx;
		}
		.tab-nav-item-active{
			font-size: 28rpx;
			color: #1AAEC0;
			padding-bottom: 12rpx;
			border-bottom: 3rpx solid #1AAEC0;
			font-weight: 500;
		}
	}
	.tab-content{
		width: 100%;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		p {
			line-height: 1.5;/* 行高为字体大小的1.5倍 */
			margin: 1em 0; 
		}
	}
	.popup-reserve{
		padding: 58rpx 40rpx 28rpx;
		
		.popup-reserve-header{
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.site{
				width: 180rpx;
			}
			.title{
				font-size: 30rpx;
				font-weight: 600;
			}
			.btn{
				display: flex;
				justify-content: flex-end;
			}
		}
		.popup-reserve-body{
			margin-top: 40rpx;
			
			.week-item{
				font-size: 32rpx;
				text-align: center;
				font-weight: 500;
				line-height: 140%;
				letter-spacing: 0.64rpx;
				padding: 32rpx 0 24rpx;
				color: rgba(190, 192, 197, 0.50);
			}
			.week-item-active{
				font-size: 32rpx;
				text-align: center;
				font-weight: 500;
				line-height: 140%;
				letter-spacing: 0.64rpx;
				padding: 32rpx 0 24rpx;
				color: #020202;
				border-bottom: 2rpx solid #020202;
			}
			.line{
				width: 100%;
				height: 1rpx;
				background-color: #F6F8FA;
				
			}
			.card{
				padding: 40rpx 32rpx 0;
				box-sizing: border-box;
			}
			.card-item{
				padding: 6px 15px;
				border-radius: 12px;
				background-color: #F6F8FA;
				color: #6A707C;
				font-size: 24rpx;
				margin-top: 32rpx;
			}
			.card-item-active{
				padding: 6px 15px;
				border-radius: 12px;
				background-color: #27C5D6;
				color: #fff;
				font-size: 24rpx;
				margin-top: 32rpx;
			}
			.card-footer{
				padding: 48rpx 32rpx 32rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
			}
			.card-footer-info{
				margin-left: 16rpx;
				color: #232426;
				font-size: 24rpx;
				line-height: 140%;
				letter-spacing: 0.24px;
			}
			.card-footer-radio{
				border-radius: 50%;
				width: 48rpx;
				height: 48rpx;
				background-color: #E5E6E8;
			}
			
			.popup-reserve-footer{
				width: 100%;
				margin-top: 48rpx;
				display: flex;
				justify-content: center;
				
				.popup-reserve-footer-tips{
					display: flex;
					justify-content: center;
					margin: 0 4rpx;
					align-items: center;
				}
				
				.popup-reserve-bag-title{
					color:#232426;
					font-size: 24rpx;
					line-height: 140%;
					letter-spacing: 0.48rpx;
				}
				
				.popup-reserve-bag{
					width: 20rpx;
					height: 20rpx;
					border-radius: 50%;
					margin-right: 8rpx;
				}
				.unactive{
					background-color: #E5E6E8;
				}
				.active{
					background-color: #27C5D6;
				}
			}
		}
	}
}
</style>